<template>
  <div id="app">
    <div class="app-layout">
      <div class="sidebar">
        <div class="logo">
          <h2>指标问答</h2>
        </div>
        <div class="menu">
          <div class="menu-item active">
            <i class="el-icon-data-line"></i>
            <span>智能问数</span>
          </div>
        </div>
        <div class="recent-chats">
          <div class="chat-list">
            <div class="chat-item" v-for="(item, index) in recentChats" :key="index">
              {{ item.title }}
              <div class="chat-time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="main-content">
        <div class="header">
          <h2>您好，欢迎使用 <span class="highlight">智能问数</span></h2>
          <p class="sub-title">通过对话的方式进行数据二次计算与可视化分析，立即从以下问数据集中选择开始问吧！</p>
        </div>
        
        <div class="data-selection">
          <h3>目前可用数据</h3>
          <div class="data-sets">
            <el-row :gutter="20">
              <el-col :span="12" v-for="table in tables" :key="table.tableCode">
                <el-card class="data-card" @click.native="selectTable(table)">
                  <div class="data-header">
                    <span class="sample-tag">{{table.tableName}}</span>
                    <span>{{ table.description }}</span>
                  </div>
                  <div class="data-body">
                    <div class="data-fields">
                      <div v-for="(field, index) in getTableFields(table)" :key="index" class="field-item">
                        {{ field }}
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </div>
        
        <div v-if="queryResult" class="result-section">
          <div class="answer-text">
            {{ queryResult.answer }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部问题输入区域 -->
    <div class="question-input-container">
      <div class="question-input-wrapper">
        <div class="input-prefix">👋</div>
        <el-input 
          v-model="question" 
          placeholder="请直接向我提问，或输入/唤起快捷提问吧"
          class="question-input"
          @keyup.enter.native="submitQuestion">
        </el-input>
        <div class="input-actions">
          <button class="action-btn" @click="showSuggestions">
            <i class="el-icon-magic-stick"></i>
          </button>
          <button class="action-btn send-btn" @click="submitQuestion">
            <i class="el-icon-position"></i>
          </button>
        </div>
      </div>
      
      <!-- 建议问题弹出层 -->
      <div v-if="showSuggestionsPanel" class="suggestions-panel">
        <div class="suggestions-title">
          <i class="el-icon-s-promotion"></i> 官方推荐
        </div>
        <div class="suggestions-list">
          <div 
            v-for="(suggestion, index) in suggestedQuestions" 
            :key="index"
            class="suggestion-item"
            @click="useQuestion(suggestion)">
            {{ suggestion }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { dataApi } from './api'

export default {
  name: 'App',
  data() {
    return {
      description: null,
      tablename: null,
      tables: [],
      selectedTable: null,
      question: '',
      queryResult: null,
      showSuggestionsPanel: false,
      suggestedQuestions: [],
      recentChats: []
    }
  },
  mounted() {
    this.loadTables()
  },
  methods: {
    async loadTables() {
      try {
        const response = await dataApi.getAllTables()
        this.tables = response.data
      } catch (error) {
        this.$message.error('加载数据表失败')
        console.error(error)
      }
    },
    selectTable(table) {
      this.selectedTable = table
      this.queryResult = null
    },
    showSuggestions() {
      this.showSuggestionsPanel = !this.showSuggestionsPanel
    },
    useQuestion(q) {
      this.question = q
      this.showSuggestionsPanel = false
    },
    getTableFields(table) {
      if (table.tableCode === 'SALES') {
        return []
      }
      return []
    },
    async submitQuestion() {
      if (!this.question.trim()) {
        this.$message.warning('请输入问题')
        return
      }
      
      try {
        // 如果用户没选择表，默认使用第一个
        const tableCode = this.selectedTable ? this.selectedTable.tableCode : 
                         (this.tables.length > 0 ? this.tables[0].tableCode : null)
        
        if (!tableCode) {
          this.$message.warning('请先选择数据表')
          return
        }
        
        const response = await dataApi.queryByQuestion(tableCode, this.question)
        this.queryResult = response.data
        
        // 清空输入框
        this.question = ''
      } catch (error) {
        this.$message.error('查询出错，请稍后重试')
        console.error(error)
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.app-layout {
  display: flex;
  height: calc(100vh - 70px); /* 留出底部输入框的空间 */
  overflow: hidden;
}

.sidebar {
  width: 200px;
  border-right: 1px solid #ebeef5;
  background-color: #f9f9f9;
  height: 100%;
  overflow-y: auto;
}

.logo {
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.logo h2 {
  margin: 0;
  font-size: 18px;
}

.menu {
  padding: 10px 0;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.menu-item i {
  margin-right: 5px;
}

.menu-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.header {
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
  font-size: 20px;
}

.highlight {
  color: #409eff;
}

.sub-title {
  color: #606266;
  font-size: 14px;
  margin: 5px 0 0 0;
}

.data-card {
  cursor: pointer;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.data-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.data-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.sample-tag {
  background-color: #ecf5ff;
  color: #409eff;
  padding: 2px 6px;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 10px;
}

.data-fields {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.field-item {
  background-color: #f5f7fa;
  padding: 2px 8px;
  margin: 4px;
  border-radius: 2px;
  font-size: 12px;
}

.result-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.answer-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.recent-chats {
  margin-top: 20px;
}

.recent-chats .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  font-size: 14px;
  color: #606266;
}

.chat-list {
  margin-top: 5px;
}

.chat-item {
  padding: 8px 15px;
  font-size: 12px;
  color: #303133;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid #ebeef5;
}

.chat-time {
  font-size: 10px;
  color: #909399;
  margin-top: 4px;
}

/* 底部问题输入区域 */
.question-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ebeef5;
  padding: 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.question-input-wrapper {
  display: flex;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  background-color: #f5f7fa;
  border-radius: 20px;
  padding: 5px 15px;
}

.input-prefix {
  margin-right: 10px;
}

.question-input {
  flex: 1;
}

.question-input .el-input__inner {
  border: none;
  background-color: transparent;
}

.input-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
}

.send-btn {
  background-color: #409eff;
  color: white;
  border: none;
}

/* 建议问题面板 */
.suggestions-panel {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.suggestions-title {
  padding: 10px 15px;
  border-bottom: 1px solid #ebeef5;
  font-size: 14px;
  color: #606266;
}

.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.suggestion-item:hover {
  background-color: #f5f7fa;
}
</style>